<template>
  <div class="coupon-wrapper">
    <div class="top">优惠券名称</div>
    <div class="bottom">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="已领取" name="first" />
        <el-tab-pane label="已核销" name="second" />
      </el-tabs>
      <el-table style="width:100%" :data="tableData">
        <el-table-column prop="date" label="头像">
          <template slot-scope="scope">
            <div>
              <el-avatar :size="60" :src="scope.row.portrait_url" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="昵称" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="designer_name" label="设计师" />
        <el-table-column prop="verify_at" label="领取/核销时间" />
      </el-table>
    </div>
  </div>
</template>
<script>
import { getUsedCouponList } from "@/api/http/coupon";
export default {
  data() {
    return {
      activeName: "first",
      status: 0,
      tableData: []
    };
  },
  created() {
    this.id = this.$route.query.id;
    if (this.$route.query.status) {
      this.status = this.$route.query.status;
      console.log(this.status, "---status");
    }
    if (this.status == 1) {
      this.activeName = "second";
    } else {
      this.activeName = "first";
    }
    this.getUsedCouponList();
  },
  methods: {
    // 获取已领取优惠券列表
    getUsedCouponList() {
      getUsedCouponList({ status: this.status, id: this.id }).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.data;
        }
      });
    },
    handleClick() {
      if (this.activeName == "first") {
        this.status = 0;
      } else {
        this.status = 1;
      }
      this.getUsedCouponList();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
.top {
  line-height: 44px;
  color: rgba(68, 68, 68, 1);
  font-size: 18px;
  text-align: left;
  font-family: Roboto;
  font-weight: bold;
}
.el-tabs /deep/ .el-tabs__header {
  margin: 0;
}
/deep/ .el-table__body-wrapper {
  height: 500px;
  overflow-y: scroll;
}
</style>
